<template>
	<view class="component" v-if="showCom">
		<view class="sub-mask" @click="close"></view>
		<view class="sub-block">
			<view class="b-main">
				<view class="s-title">用餐提示</view>
				<view class="s-scan" @click="onScanCode">
					<view class="iconfont icon-scan"></view>
					<view class="s-cont">请先扫点餐码</view>
				</view>
				<view class="s-action" @click="close">
					<view class="s-btn">看看再说</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from '@/common/util'
	export default {
		name: 'scan-desk',
		props: {},
		data() {
			return {
				showCom: false
			}
		},
		methods: {
			show() {
				this.showCom = true
			},
			close() {
				this.showCom = false
			},
			onScanCode() {
				// #ifdef  MP-WEIXIN
				uni.scanCode().then(([err, res]) => {
					console.log('uni.scanCode', err, res)
					if (!err) {
						let urlData = Util.urlDecode(res.path)
						console.log('urlData', urlData)
						if (!urlData || !urlData.scene) {
							return this.$logic.showToast('点餐码不对')
						}
						let sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
						console.log('sceneData', sceneData)
						if (!sceneData || !sceneData.did) {
							return this.$logic.showToast('点餐码不对')
						}
						this.$emit('bindChange', sceneData)
						this.close()
					}
				})
				// #endif
				
				// #ifdef  H5
				const that = this
				wx.scanQRCode({
					needResult: 1,
					success: function(res) {
						console.log('wx.scanQRCode', res)
						let urlData = Util.urlDecode(res.resultStr)
						console.log('urlData', urlData)
						if (!urlData || !urlData.scene) {
							return that.$logic.showToast('点餐码不对')
						}
						let sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
						console.log('sceneData', sceneData)
						if (!sceneData || !sceneData.did) {
							return that.$logic.showToast('点餐码不对')
						}
						that.$emit('bindChange', sceneData)
						that.close()
					}
				})
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.sub-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.6);
	}

	.sub-block {
		position: fixed;
		left: 50%;
		top: 48%;
		transform: translate(-50%, -50%);
		z-index: 100;
		width: 480upx;

		image {
			width: 100%;
		}
	}

	.b-main {
		padding: 40upx 0;
		background: #fff;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.s-title {
			margin-bottom: 40upx;
			font-size: 32upx;
			font-weight: bold;
			color: #333;
		}

		.s-scan {
			padding: 0 60upx;
			background: #DA5650;
			height: 100upx;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 40upx;
				color: #fff;
			}

			.s-cont {
				margin-left: 20upx;
				font-size: 30upx;
				color: #fff;
			}
		}

		.s-action {
			margin-top: 40upx;

			.s-btn {
				font-size: 26upx;
				color: #666;
			}
		}
	}
</style>
